"use client";
import { CashbackTypes } from "@/api/cashback";
import { server } from "@/utils/client";
import { timeFormat } from "@/utils/methods";
import { Toast } from "antd-mobile";
import { useAnimate } from "framer-motion";
import { useTranslations } from "next-intl";
import styles from "./style.module.scss";
interface Props {
    local: string;
    cashbackInfo: CashbackTypes;
}
const Extract = (props: Props) => {
    const { local, cashbackInfo } = props;
    const [scope, animate] = useAnimate();

    const t = useTranslations();
    const getCashbackGiveApi = () => {
        if (cashbackInfo.status !== "pending") {
            animate(
                scope.current,
                { color: ["#000", "#ffaa30", "#000"] },
                {
                    duration: 0.6,
                    repeat: 2,
                    repeatType: "loop",
                }
            );
            return;
        }
        if (cashbackInfo.amount === 0) {
            return;
        }
        return server
            .post({
                url: "/v1/api/front/activity_cash_give",
            })
            .then((res) => {
                if (res.code === 200) Toast.show(t(`code.200`));
            })
            .catch((error) => {
                Toast.show(t(`code.${error.data.code}`));
            });
    };
    return (
        <>
            <ul className={"mb-[0.2rem]"}>
                <li className={styles.timelineItem}>
                    <p className={"text-[20px] text-[#a3a3a3]"}>{t("cashback.beforeTips")} </p>
                    <div className={`${styles.timelineMarker} before:bg-[#fbc110]`}></div>
                    <div className={styles.timelineContent}>
                        <span className={"text-[0.12rem] text-[#6c6c6c]"}>
                            {timeFormat(cashbackInfo.last_period.start_time, local)} ~{" "}
                            {timeFormat(cashbackInfo.last_period.end_time, local)}
                        </span>
                    </div>
                </li>
                <li className={styles.timelineItem}>
                    <p className={"text-[20px] text-[#a3a3a3]"}>{t("cashback.afterTips")} </p>
                    <div className={`${styles.timelineMarker} before:bg-[#9ae0b9]`}></div>
                    <div>
                        <span className={"text-[0.12rem] text-[#6c6c6c]"} ref={scope}>
                            {timeFormat(cashbackInfo.next_period.start_time, local)} ~{" "}
                            {timeFormat(cashbackInfo.next_period.end_time, local)}
                        </span>
                    </div>
                </li>
            </ul>
            <div
                className={
                    "rounded bg-gradient-to-b from-[#ff9b23] to-[#ff7308]" +
                    " flex h-[0.3472rem] items-center justify-center font-bold text-[#fff]"
                }
                onClick={getCashbackGiveApi}
            >
                {t("cashback.receiveButton")}
            </div>
        </>
    );
};

export default Extract;